<template>
    <div class="passwordReset">
        <van-nav-bar
                title="找回密码"
                left-arrow
                @click-left="$navBack('/login')">
        </van-nav-bar>
        <div class="registerWrap text-center-pk">
            <div class="phoneWrap">
                <div class="font-size-12-pk">校验手机号码</div>
                <div class="font-size-16-pk">{{this.phone}}</div>
            </div>
            <div class="formWrap">
                <van-field
                        v-model="smsCode"
                        placeholder="请输入短信验证码"
                        clearable
                        :left-icon="require('@img/register-sms-code.png')"
                        class="forSmsCode formItem">
                    <send-sms-code code-type="2" :phone="phone" slot="button"></send-sms-code>
                </van-field>
                <van-field
                        v-model="password"
                        placeholder="请输入新密码"
                        :type="passwordType"
                        clearable
                        :left-icon="require('@img/login-password.png')"
                        class="formPassword formItem"
                        @click-left-icon="togglePassword('1')">
                </van-field>
                <van-field
                        v-model="passwordAgain"
                        placeholder="请再次输入新密码"
                        :type="passwordAgainType"
                        clearable
                        :left-icon="require('@img/login-password.png')"
                        class="formPassword formItem"
                        @click-left-icon="togglePassword('2')">
                </van-field>
            </div>
            <van-button
                    :loading="resetSending"
                    type="danger"
                    loading-text="重置"
                    block
                    @click="passwordReset">
                重置
            </van-button>
        </div>
    </div>
</template>

<script>
    import SendSmsCode from "../../components/smsCode/SendSmsCode";
    export default {
        name: 'passwordReset',
        components: {SendSmsCode},

        data() {
            return {
                phone: this.$route.query.phone,
                password: "",
                passwordAgain: "",
                smsCode: "",
                checked: false,
                resetSending: false,
                passwordAgainType: "password",
                passwordType : "password",

            }
        },

        created() {
        },
        computed: {},
        watch: {},
        methods: {
            /*toLogin() {
                this.$router.push({path: "/login"})
            },*/
            //发送验证码
            sendValid() {
                //发送中，不在请求
                if(this.mesSending) {
                    return
                }
                this.mesSending = true;
                this.$api.resetPasswordGetSmsCode(this.phone).then( res => {
                    if(this.$resResult(res)) {
                        this.getCount();
                    }else {
                        this.mesSending = false;
                    }
                });
            },
            //计数倒数60秒
            getCount() {
                let count = 60;
                this.countTips = count + "秒";
                if(!this.validCodeTimer) {
                    this.validCodeTimer = setInterval(()=> {
                        if(count > 0 ) {
                            count --;
                            this.countTips = count + "秒";
                        }else {
                            clearInterval(this.validCodeTimer);
                            this.validCodeTimer = null;
                            this.mesSending = false;
                            this.countTips = "重新发送";
                        }
                    }, 1000)
                }

            },
            async passwordReset() {
                if(!this.smsCode) {
                    this.$toast("请输入验证码");
                    return false
                }
                if(this.password && (this.password !== this.passwordAgain)) {
                    this.$toast.fail("两次密码输入不一致");
                    return false
                }
                this.$toast.loading({
                    message: "提交中",
                    forbidClick: true
                });
                let dyncKey = await this.$util.getDynamicSecretKey();
                if(dyncKey) {
                    this.$api.modPassword({
                        password: this.$util.encrypt(this.password, dyncKey.tokenKey),
                        phone: this.phone,
                        smsCode: this.smsCode,
                        userKey: dyncKey.userKey
                    }).then(modRes => {
                        this.resetSending = false;
                        //Toast 默认采用单例模式，即同一时间只会存在一个 Toast
                        if(this.$resResult(modRes)) {
                            //修改成功，跳转到登录页
                            this.$toast.success({
                                message:"重置成功",
                                onClose: () => {
                                    this.$router.push({path: "/login"})
                                }
                            })
                        }
                    })
                }
            },
            //密码是否可见
            togglePassword(index) {
                if(index === "1") {
                    this.passwordType = this.passwordType === "password" ? "text" : "password"
                }
                if(index === "2") {
                    this.passwordAgainType = this.passwordAgainType === "password" ? "text" : "password"
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
    .passwordReset {
        .van-cell {
            padding: 8px 12px;
            box-shadow: 0 2px 6px 0 rgba(216, 40, 10, 0.2);
        }
        .phoneWrap {
            padding: 38px 0;
        }
        .registerWrap {
            padding: 0 27px;
            .formWrap {
                .formItem {
                    margin-bottom: 20px;
                }
                padding-bottom: 20px;
            }

        }
        .privacyWrap {
            .privacyCheck {

                padding-top: 2px;
                margin-right: 8px;
                padding-right: 4px;
            }
            align-items: flex-start;
            padding: 12px 4px;
            font-size: 12px;
        }
    }
</style>
